<template>
  <div>
    <el-form :inline="true" :model="data.selectData" class="demo-form-inline">
      <el-form-item label="姓名">
        <el-input
          v-model="data.selectData.nickName"
          placeholder="请输入关键字"
        />
      </el-form-item>
      <el-form-item label="角色">
        <el-select
          v-model="data.selectData.role"
          class="m-2"
          placeholder="选择角色"
        >
          <el-option :value="0" label="全部" />
          <el-option
            v-for="item in data.roleList"
            :key="item.roleId"
            :label="item.roleName"
            :value="item.roleId"
            size="small"
          />
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="onSubmit">查询</el-button>
      </el-form-item>
    </el-form>
    <el-table :data="data.list" border style="width: 100%">
      <el-table-column prop="id" label="id" width="180" />
      <el-table-column prop="nickName" label="昵称" width="180" />
      <el-table-column prop="role" label="角色">
        <template #default="scope">
          <el-button link v-for="item in scope.row.role" :key="item.role">
            {{ item.roleName }}
          </el-button>
        </template>
      </el-table-column>
      <el-table-column prop="role" label="操作">
        <template #default="scope">
          <el-button type="primary" @click="editUser(scope.row)">
            编辑
          </el-button>
        </template>
      </el-table-column>
    </el-table>
  </div>
  <el-dialog v-model="data.isShow" title="编辑信息">
    <el-form :model="data.active">
      <el-form-item label="姓名" label-width="50px">
        <el-input v-model="data.active.nickName" autocomplete="off" />
      </el-form-item>
      <el-form-item label="角色" label-width="50px">
        <el-select v-model="data.active.role" placeholder="请选择" multiple>
          <el-option
            v-for="item in data.roleList"
            :key="item.roleId"
            :label="item.roleName"
            :value="item.roleId"
            size="small"
          />
        </el-select>
      </el-form-item>
    </el-form>
    <template #footer>
      <span class="dialog-footer">
        <el-button @click="data.isShow = false">取消</el-button>
        <el-button type="primary" @click="update"> 更改 </el-button>
      </span>
    </template>
  </el-dialog>
</template>

<script setup lang="ts">
import Api from "@/request/api";
import { onMounted, reactive, watch } from "vue";
import { InitData } from "@/type/user";
import { ListInt } from "@/type/user";

const data = reactive(new InitData());

onMounted(() => {
  getUser();
  getRole();
});
const getUser = () => {
  Api.getUserList().then((res: any) => {
    console.log(res);
    data.list = res.data.list;
  });
};
const getRole = () => {
  Api.getRoleList().then((res: any) => {
    data.roleList = res.data.list;
  });
};
const onSubmit = () => {
  let arr: ListInt[] = []; //定义数组，用来接受查询过后要展示的数据
  if (data.selectData.nickName || data.selectData.role) {
    //判断是否有值
    if (data.selectData.nickName) {
      arr = data.list.filter((value) => {
        //过滤数组
        return value.nickName.indexOf(data.selectData.nickName) !== -1;
      });
    }
    if (data.selectData.role) {
      arr = (data.selectData.nickName ? arr : data.list).filter((value) => {
        //过滤数组
        return value.role.find((item) => item.role === data.selectData.role);
      });
    }
  } else {
    arr = data.list;
  }
  data.list = arr;
};
const editUser = (row: ListInt) => {
  console.log(row);

  data.active = {
    id: row.id,
    nickName: row.nickName,
    role: row.role.map((value: any) => value.role || value.roleId),
    userName: row.userName,
  };
  data.isShow = true;
};
const update = () => {
  let obj: any = data.list.find((value) => value.id == data.active.id);
  obj.nickName = data.active.nickName;
  obj.role = data.roleList.filter(
    (value) => data.active.role.indexOf(value.roleId) !== -1
  );
  data.list.forEach((item, i) => {
    if (item.id == obj.id) {
      data.list[i] = obj;
    }
  });
  data.isShow = false;
};
watch(
  [() => data.selectData.nickName, () => data.selectData.role],
  () => {
    if (data.selectData.nickName == "" || data.selectData.role == 0) {
      getUser();
    }
  },
  {}
);
</script>

<style lang="scss" scoped></style>
